<template>
  <div class="top">
    <div class="content">
      <!-- 内容区 -->
      <div class="left">
        <RouterLink :to="{name:'home'}">
          <img src="../../assets/home/logo2024.png" alt="">
        </RouterLink>
      </div>
      <div class="middle">
        <RouterLink :to="{name:'home'}" class="link_style" active-class="active">首页</routerlink>
        <RouterLink :to="{name:'assignment'}" class="link_style" active-class="active">大会议程</routerlink>
        <RouterLink :to="{name:'info'}" class="link_style" active-class="active">会议资讯</routerlink>
        <RouterLink :to="{name:'expert'}" class="link_style" active-class="active">大咖云集</routerlink>
        <RouterLink :to="{name:'forum'}" class="link_style" active-class="active">论坛</routerlink>
        <RouterLink :to="{name:'study'}" class="link_style" active-class="active">西湖帮</routerlink>
        <RouterLink :to="{name:'product'}" class="link_style" active-class="active">成果展示</routerlink>
        <RouterLink :to="{name:'livestream'}" class="link_style" active-class="active">大会直播</routerlink>
        <el-button size="small" @click="()=>showDialog=true" class="pay" plain>购买门票</el-button>

      </div>
      <div class="right">
        <div v-show="setup" style="display: flex; align-items: center;">
          <RouterLink :to="{name:'personal'}" class="link_style" active-class="active-user">个人中心</routerlink>&nbsp;|&nbsp;
          <p class="exit" @click="exit">退出</p>
          <div v-show="admin">
            &nbsp;|&nbsp;<RouterLink :to="{}" class="link_style" active-class="active-user" v-show="admin">数据看板
          </routerlink>
          </div>
        </div>
        <div v-show="!setup">
          <p class="login" @click="login">登录&nbsp;|&nbsp;注册</p>
        </div>

      </div>
      <el-dialog v-model="showDialog" title="活动门票购买" width="600">
        <div class="pay-dialog">
          <div class="payItem">
            <p class="attribute">活动名称:</p>
            <p class="payVal">格物致知@西湖论剑[18:00-21:00]</p>
          </div>
          <div class="payItem">
            <p class="attribute">活动地点:</p>
            <p class="payVal">5月5日 下午</p>
          </div>
          <div class="pay-code">
            <img :src="qrUrl" alt="">
          </div>

        </div>
      </el-dialog>
    </div>
  </div>

</template>

<script setup lang="ts" name="HeaderNav">
//获取useLogin仓库的数据（setup）可以控制login组件对话框的显示与隐藏
import {useLoginStore} from '@/store/login_data';

let useLogin = useLoginStore();
import {RouterLink} from 'vue-router'
// import { useAdmin } from '@/store/admin';
import {storeToRefs} from 'pinia';
import {getPayCode, getPayStatus} from "@/api/pay.ts";
import {onMounted, ref, watch} from "vue";

const {setup, admin} = storeToRefs(useLoginStore());
let qrUrl = ref("");

function exit() {
  setup.value = false;
}

//点击登录与注册按钮时弹出对话框
const login = () => {
  useLogin.show = true;
}
let timer = null
let showDialog = ref<Boolean>(false)
onMounted(() => {

  watch(() => showDialog.value, async (nv, ov) => {
    let subject = "商品名称"
    // let outTrade="10038"
    let totalAmount = 100
    if (nv) {
      qrUrl.value = "";
      let {imageUrl, outTrade} = await getPayCode(subject, totalAmount)
      qrUrl.value = "data:image/png;base64," + imageUrl;
      timer = setTimeout(async () => {
        let data = await getPayStatus(outTrade)
        if (data == "TRADE_SUCCESS"
            || data == "TRADE_FINISHED"
            || data == "TRADE_CLOSED"
            || data == "WAIT_BUYER_PAY"
        ) {
          clearInterval(timer)
        }
        console.log(data)
      }, 1500)
    } else {
      clearInterval(timer)
    }
  })
})
</script>

<style scoped lang="scss">
.top {
  background-color: black;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 4vw;
  display: flex;
  justify-content: center;
  align-items: center;

  ::v-deep .pay span {

    font-size: .8em;
  }

  ::v-deep .pay-dialog {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    padding-left: 5vw;

    .payItem {
      display: flex;
      justify-items: center;
      gap: 4vw;
    }

    .pay-code {
      width: 140px;
      height: 140px;
      margin: 0 auto;
      padding-right: 5vw;

      img {
        width: 140px;
        height: 140px;
      }
    }
  }

  .content {
    height: 100%;
    width: 90%;
    display: flex;
    justify-content: space-between;

    .left {
      width: 16%;
      display: flex;
      height: 4vw;
      align-items: center;

      img {
        overflow: hidden;
        width: 100%;
        height: 100%;
        border: 0;
        vertical-align: middle;
      }

      .active {
        color: #2997ff;
      }
    }

    .middle {
      width: 70%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding-left: 2.6042vw;

      .link_style {
        display: inline-block;
        text-decoration: none;
        font-size: .7813vw;
        color: white;
        margin-right: 1.3021vw;
      }

      .active {
        color: #2997ff;
      }
    }

    .right {
      width: 15%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: #eeeeee;

      .link_style {
        display: inline-block;
        font-size: .625vw;
        text-decoration: none;
        color: #eeeeee;
      }

      .exit {
        cursor: pointer;
        display: inline-block;
        font-size: .625vw;
        color: #eeeeee;
      }

      .login {
        display: inline-block;
        font-size: .625vw;
        margin-left: 1.0417vw;
        color: #eeeeee;
      }

      .active-user {
        color: #bbbbbb;
      }
    }

  }
}

</style>